<template>
	<view>
		<view class="" style="padding-bottom: 40rpx;">
			<view class="" style="padding: 40rpx;padding-bottom: 10rpx;">
				附近门店
			</view>
			<view class="item" v-for="item in list" :key="item.id" >
				<u-card :show-head="false" :show-foot="false" @click="select(item)">
					<view class="card_body" slot="body">
						<view class="body_left">
							<view class="body_title">
								{{item.name}}
							</view>
							<view class="distance">
								<view class="distance_icon">
									<u-icon color="#ADB838" name="map"></u-icon>
									<text>{{item.distance}}</text>
								</view>
								<view class="address">
									{{item.address}}
								</view>
							</view>
							<view class="walk">
								步行约:{{item.walking_time}}
							</view>
						</view>
						<view class="body_right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</u-card>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				list : []
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getCurrentLocation()
		},
		computed:{
			...mapState(['store'])
		},
		methods:{
			...mapMutations(['SET_STORE','clear_cart','SET_STATUS']),
			select(e){
				console.log(e);
				if(e.id != this.store.id){
					this.SET_STATUS(true)
					this.SET_STORE(e)
				}
				
				uni.navigateBack()
			},
			getCurrentLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log("当前坐标信息：", res)
						let e = {
							longitude: res.longitude,
							latitude: res.latitude,
							distance: 20
						}
						this.getShop(e)
					},
					fail: (err) => {
						console.log(err,999);
						switch (err.errCode) {
						    case 1: // 用户拒绝
						      // this.showPermissionGuide()
						      break
						    case 2: // 位置不可用
						      uni.showToast({ title: '无法获取位置信息,请检查设备定位权限', icon: 'none',duration:1500 })
						      break
						    case 3: // 超时
						      uni.showToast({ title: '定位超时，请重试', icon: 'none' })
						      break
						    default:
						      console.error('定位错误', err)
						  }
						 setTimeout(()=>{
							 uni.reLaunch({
							 	url:"/pages/tarbar/home"
							 })
						 },1500)
					}
			
				})
			},
			async getShop(e) {
				let res = await this.apiPost('/shop/getNearShop', e)
				console.log(res);
				if (res.data.code == 1) {
					if(res.data.data.length > 0 ){
						this.list = res.data.data
						console.log(this.list);
						this.show = false
						this.listShow = true
					}else{
						this.show = false
						this.listShow = false
					}
				} else {
					this.msg(res.data.msg)
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="less">
.card_body {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.body_left {
			width: 90%;
			.body_title {
				color: #000;
				font-weight: 500;
			}

			.distance {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 22rpx;
				margin-top: 10rpx;
				
								
				.distance_icon{
					margin-right: 20rpx;
					color: #ADB838;
					margin-right: 10rpx;
				
				}
				.address {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.walk{
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
